<template>
  <div class="centerBody">
    <!--地图-->
    <!--<china2></china2>-->
    <item2 style="z-index: 1"></item2>
    <!--背景图-->
    <img class="bottomImg wow fadeInUp" src="./assets/bottomAnimte.png" alt="">
    <img class="leftImg wow fadeInLeft" src="./assets/left.png" alt="">
    <img class="rightImg wow fadeInRight" src="./assets/right.png" alt="">
  </div>
</template>

<script>
import { gsap } from 'gsap'
import bus from '@/eventBus'

// import pop from './../pop/pop.vue'
// import bg from './../pop/bg/index.vue'
// import china2 from './china2'
import item2 from '../item2/index'

export default {
  name: 'item6Title',
  data () {
    return {
      showDetail: null,
      tableData: {}
    }
  },
  components: { item2 },
  mounted () {
    if(this.$refs.centerImg){
      this.animateImage()
    }
  },
  methods: {
    getHide(){
      this.showDetail = false
    },
    getPop () {
      this.$refs.pop.getShow()
    },
    getShowDetail (list) {
      this.tableData = list
      this.showDetail = true
      console.log(this.showDetail)
    },
    animateImage () {
      gsap.from(this.$refs.centerImg, {
        duration: 1, // 动画持续时间，单位是秒
        scale: 0, // 从0倍大小开始
        ease: 'power1.out' // 缓动函数，这里使用了一个渐出效果
      })
      gsap.from(this.$refs.centerImg, {
        duration: 1, // 动画持续时间，单位是秒
        ease: 'power1.out', // 缓动函数，这里使用了一个渐出效果
        y: 10, // 在垂直方向上移动10像素
        repeat: -1, // 无限重复
        yoyo: true // 反向播放
      })
    }
  },
  created () {
    bus.$on('share', val => {
      this.tableData = val
    })
  }
}
</script>

<style lang="scss" scoped>
.centerBody {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;

  .leftImg {
    position: absolute;
    left: 0;
    height: 360px;
  }

  .rightImg {
    position: absolute;
    right: 0;
    height: 360px;
  }

  .centerImg {
    width: 499px;
  }

  .bottomImg {
    position: absolute;
    bottom: -90px;
    width: 100%;
  }

  .searchTop {
    position: absolute;
    top: 0;
    width: 100%;
    height: 33px;
    background: url("./assets/searchTop.png") no-repeat;
    background-size: 100% 100%;
    opacity: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    cursor: pointer;
    z-index: 20;

    .searchTopl {
      font-size: 14px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #99CEFF;
      margin-left: 13px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
    }

    .searchTopr {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;

      img {
        width: 18px;
        margin-right: 15px;
      }
    }
  }
}

.centerInfo {
  position: absolute;
  top: 45px;
  left: 0;
  width: 100%;
  height: calc(100% - 45px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  //background: red;
  .centerInfoMain {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
    background: url("./assets/bg.png") no-repeat;
    background-size: cover;
    .titleInfo {
      background: url("./assets/titlebg.png") no-repeat;
      background-size: 100% 100%;
      width: 613px;
      height: 135px;
      margin-top: -35px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
      font-size: 18px;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #FFFFFF;
    }

    .centerInfoMaint {
      width: 100%;
      position: relative;
      height: 100%;

      .centerInfoMaint1 {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: nowrap;
        flex-direction: row;
        align-content: flex-start;

        .centerInfoMaint1l {
          width: calc(50% - 24px);
          //height: 190px;
          margin-left: 24px;

          .centerInfoMaint1item {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: nowrap;
            flex-direction: row;
            align-content: flex-start;
            height: 50px;

            p {
              font-size: 14px;
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              color: #B8CCFF;
            }

            span {
              font-size: 14px;
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              color: #a7bbf2;

              em {
                font-size: 14px;
                font-family: PingFang SC, PingFang SC;
                font-weight: bold;
                color: #FFB801;
                font-style: normal;
              }
            }
          }
        }

        .centerInfoMaint1l:nth-child(1) {
          border-right: 1px solid #224885;
        }
      }

      .centerInfoMaint2 {
        width: calc(100% - 24px - 24px);
        margin-left: 24px;
        margin-top: 20px;

        p {
          font-size: 14px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #B8CCFF;
        }

        .centerInfoMaint2Desc {
          height: 100px;
          margin-top: 10px;
          background: rgba(0, 133, 255, 0.24);
          border-radius: 10px 10px 10px 10px;
          opacity: 1;

          span {
            font-size: 14px;
            font-family: PingFang SC, PingFang SC;
            color: #90d9fc;
            margin-left: 20px;
            margin-right: 20px;
            display: inline-block;
            margin-top: 20px;
          }
        }
      }

    }

    .footerBut {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;
      width: 100%;
      //height: 100px;
      .footerButItem {
        background: url("./assets/butbg.png") no-repeat;
        background-size: 100% 100%;
        width: 130px;
        height: 46px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        align-content: flex-start;
        margin-left: 45px;
        margin-right: 45px;
        cursor: pointer;

        span {
          font-size: 18px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #89ADCE;
          letter-spacing: 20px;
          text-indent: 20px;
        }
      }
    }
  }
}
</style>
